import React from 'react';
import ProTable from '@ant-design/pro-table';
import { PageContainer } from '@ant-design/pro-layout';
import { searchItemList } from '@/services/item/item';
import { Link } from 'umi';

const columns = [
  {
    title: '序号',
    width: 80,
    valueType: 'index',
  },
  {
    title: '作品名称',
    width: 160,
    dataIndex: 'name',
    copyable: true,
  },
  {
    title: '作品类型',
    width: 80,
    dataIndex: 'category',
    valueEnum: {
      1: '文字作品',
      2: '图片作品',
      3: '视频作品',
    },
  },
  {
    title: '作品介绍',
    dataIndex: 'description',
    hideInSearch: true,
    ellipsis: true,
  },
  {
    title: '出售方式',
    width: 80,
    dataIndex: 'status',
    valueType: 'select',
    valueEnum: {
      2: '定价',
      3: '拍卖',
      4: '授权',
    },
  },
  {
    title: '价格',
    width: 80,
    dataIndex: 'price',
    hideInSearch: true,
  },
  {
    title: '所有者',
    width: 80,
    dataIndex: 'owner',
    hideInSearch: true,
    render: (_, record) => {
      return record.owner.username;
    },
  },
  {
    title: '操作',
    width: 80,
    valueType: 'option',
    render: (_, record) => {
      return <Link to={`/trade/item/${record.id}`}>详情</Link>;
    },
  },
];

const ItemTable = () => {
  return (
    <PageContainer>
      <ProTable
        headerTitle="作品列表"
        cardBordered
        rowKey="id"
        options={false}
        columns={columns}
        params={{ onSale: true }}
        request={(params, sorter, filter) => searchItemList({ ...params, sorter, filter })}
      />
    </PageContainer>
  );
};

export default ItemTable;
